<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../../css/elementUI.css" />
<style>
	*{
		padding: 0;
		margin: 0;
	}
</style>
</head>
<body>
	<div id="app" ref="v">
			<!-- 表格数据 -->
			<el-table
			    :data="Advertisements"
			    border
			    show-header
			    highlight-current-row
			    align="center"
			    style="width: 100%; margin-top:40px; min-height:340px">
			    <el-table-column
			      label="广告编号" width="80">
			      <template slot-scope="scope">
			        <span>{{ scope.row.id }}</span>
			      </template>
			    </el-table-column>
				<el-table-column
						label="广告图片"
						width="125">
					<template slot-scope="scope">
						<div class="demo-image__preview">
							<el-image
									style="width: 100px; height: 100px"
									:src="scope.row.head"
									>
							</el-image>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="在线图片链接">
					<template slot-scope="scope">
						<!--创建一个可点击的链接-->
						<el-link :href="scope.row.www" target="_blank" type="primary">{{ scope.row.www }}</el-link>
					</template>
				</el-table-column>
			    <el-table-column
			      label="广告描述">
			      <template slot-scope="scope">
			        <span>{{ scope.row.description }}</span>
			      </template>
			    </el-table-column>
				<el-table-column
						label="点击次数" width="80">
					<template slot-scope="scope">
						<span>{{ scope.row.clickCount }}</span>
					</template>
				</el-table-column>
				<el-table-column
						label="关闭次数">
					<template slot-scope="scope">
						<span>{{ scope.row.closingCount }}</span>
					</template>
				</el-table-column>
			    <el-table-column
			      label="创建时间">
			      <template slot-scope="scope">
			        <span>{{ scope.row.createdTime }}</span>
			      </template>
			    </el-table-column>
				<el-table-column
						label="开始时间">
					<template slot-scope="scope">
						<span>{{ scope.row.beginTime }}</span>
					</template>
				</el-table-column>
				<el-table-column
						label="更新时间">
					<template slot-scope="scope">
						<span>{{ scope.row.updatedTime }}</span>
					</template>
				</el-table-column>
			    <el-table-column
			      label="状态" width="80">
			      <template slot-scope="scope">
			        <span>{{ scope.row.status == 1 ? "启用" : scope.row.status == 0 ? "等待" : "已过期"}}</span>
			      </template>
			    </el-table-column>
			    
			    <el-table-column label="操作" width="216">
			      <template slot-scope="scope">
			        <el-button
			          size="mini"
			          @click="set(scope.$index, scope.row)">编辑</el-button>
			          <el-button
			          size="mini"
			          @click="add(scope.$index, scope.row)">添加</el-button>
			        <el-button
			          size="mini"
			          type="danger"
			          @click="Delete(scope.$index, scope.row)" v-if="scope.row.status==1">禁用</el-button>
					  <el-button
							  size="mini"
							  type="danger"
							  @click="Delete(scope.$index, scope.row)" v-if="scope.row.status==0">启用</el-button> </template>
			    </el-table-column>
			  </el-table>

		</el-card>
		
		<el-dialog title="编辑广告信息" :visible.sync="update" @close="cancelUpdate">
		  <el-form :inline="true" class="demo-form-inline">
			  <el-form-item label="用户id">
				  <el-input
						  placeholder="请输入内容"
						  v-model="updateAdv.id"
						  :disabled="true">
				  </el-input>
			  </el-form-item>
			  <el-form-item label="用户链接">
			    <el-input v-model="updateAdv.www" placeholder="链接地址"></el-input>
			</el-form-item>

		    <el-form-item label="描述">
				<el-input
						type="textarea"
						autosize
						placeholder="描述"
						v-model="updateAdv.description">
				</el-input>
			</el-form-item>
		</el-form>
		<el-form :inline="true" class="demo-form-inline">
			 <el-form-item label="头像">
				<div class="demo-image__preview">
					<el-image 
					    style="width: 100px; height: 100px"
					    :src="imageSrc"
					    >
					  </el-image>
				</div>
				</el-form-item>
			<el-form-item>
				<input type="file" name="pic" @change="getFile($event)" accept="image/gif, image/jpeg, image/jpg, image/png">
			</el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="cancelUpdate">取 消</el-button>
		    <el-button type="primary" @click="updateAdminInfo">确 定</el-button>
		  </div>
		</el-dialog>
		
		<el-dialog title="添加广告" :visible.sync="addAdr" @close="canceladdUser">
		  <el-form :inline="true" class="demo-form-inline">
		    <el-form-item label="广告链接">
			    <el-input v-model="addadr.www" placeholder="广告链接"></el-input>
			</el-form-item>
			  <el-form-item label="描述">
				  <el-input
						  type="textarea"
						  autosize
						  placeholder="描述"
						  v-model="addadr.description">
				  </el-input>
			  </el-form-item>
		</el-form>
		<el-form :inline="true" class="demo-form-inline">
			 <el-form-item label="广告图片">
				<div class="demo-image__preview">
					<el-image 
					    style="width: 100px; height: 100px"
					    :src="addSrc"
					    >
					  </el-image>
				</div>
				</el-form-item>
			<el-form-item>
				<input type="file" name="pic" @change="addFile($event)" accept="image/gif, image/jpeg, image/jpg, image/png">
			</el-form-item>
			<el-form-item label="广告定位">
				<el-radio-group v-model="addadr.position">
					<el-radio label="浮动"></el-radio>
					<el-radio label="固定"></el-radio>
				</el-radio-group>
			</el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="canceladdUser">取 消</el-button>
		    <el-button type="primary" @click="addAddrInfo">确 定</el-button>
		  </div>
		</el-dialog>
	</div>
<script src="../../js/vue.js"></script>
<script src="../../js/elementUI.js"></script>
<script src="../../js/axios.js"></script>
<script src="../../js/qs.js"></script>
<script>
	let app = new Vue({
		el:'#app',
		data:{
			 head:'',
			// 存储转换后的 URL
			imageSrc: '',
			 userInfo:{
				 uname:'',
				 email:'',
				 status:''
			 },
			 Advertisements:[],
			 users:[],
			 update:false,
			 addAdr:false,
			 addadr:[],
			 updateAdv:[],
			 addSrc:''
		},
		mounted(){
			this.selectAdvertisement();
		},
		methods: {
			addFile(obj){
				console.log(obj.target.files[0]);
				this.addadr.image = obj.target.files[0] ;
				// @click.prevent 抑制默认行为
				let formData = new FormData();
				let head=this.addadr.image;
				formData.append("head",head);
				axios.post("../../advertisement/addupload", formData).then(res=>{
					if(res.data.code==200){
						this.addSrc=this.blobToUrl(res.data.data);
					}else{
						this.$message.error('上传头像图片出错！');
					}
				});
			},
			blobToUrl(data) {
				// let temp = new Blob([data]);   // 返回的文件流数据
				// let url = window.URL.createObjectURL(temp);  // 将他转化为路径
				// console.log(url);
				var url='data:image/png;base64,' + data
				return url;
			},
			canceladdUser(){
				this.addAdr = false;
				this.addSrc = '';
			},
			cancelUpdate(){
				this.update = false;
				this.head = '';
			},
			getFile(obj){
                console.log(obj.target.files[0]);
                	this.head = URL.createObjectURL(obj.target.files[0]);
                    this.updateAdv.head = obj.target.files[0] ;
                
                if(this.updateAdv){
                	this.head = URL.createObjectURL(obj.target.files[0]);
                	this.updateAdv.head = obj.target.files[0] ;
                }
				// @click.prevent 抑制默认行为
				let formData = new FormData();
				let head=this.updateAdv.head;
				formData.append("head",head);
				axios.post("../../advertisement/upload", formData).then(res=>{
					if(res.data.code==200){
						this.imageSrc=this.blobToUrl(res.data.data);
					}else{
						this.$message.error('上传头像图片出错！');
					}
				});
            },
			selectAdvertisement(){
				axios.get("../../advertisement/selectAdvertisement"
					).then(resp=>{
					this.Advertisements = resp.data;
					this.Advertisements.forEach(advertisement => {
						advertisement.head=this.blobToUrl(advertisement.image);
					});
				});
			},
			queryUserInfo(){
				axios.get("../../user/findMemberByQuery",{
					params:this.userInfo
				}).then(resp=>{
					console.log(resp);
					this.users = resp.data;
				});
			},
			set(index,obj){
				this.update = true;
				this.updateAdv = obj;
				this.imageSrc=this.blobToUrl(obj.image)
			},
			Delete(index,obj){
				this.$confirm('是否进行该操作?', '提示', {
			          confirmButtonText: '确定',
			          cancelButtonText: '取消',
			          type: 'warning'
			        }).then(() => {
			          axios.post("../../advertisement/delAdv",
		                        qs.stringify(
		                            {
		                                id:obj.id,
										status: obj.status
		                            }
		                        )
		                    ).then(resp=>{
								if(resp.data.code==200){
									this.head = '';
									this.$message({
										type: 'success',
										message: '操作成功!'
									});
									this.selectAdvertisement();
								}else{
									this.$message("操作出错");
								}

		                    	
		                    });
			        }).catch(() => {
			          this.$message({
			            type: 'info',
			            message: '已取消操作'
			          });          
			        });
			},
			add(index,obj){
				this.addAdr = true;
			},
			addAddrInfo(){
				let config = {
						headers:{
							'Content-Type':'multipart/form-data'
						}
					}
					let formData = new FormData();
	                formData.append("www",this.addadr.www);
	                formData.append("description",this.addadr.description);
	                formData.append("position",this.addadr.position);
	                
				axios.post("../../advertisement/addAdrInfo",
					formData,
					config
				).then(resp=>{
					console.log(resp);
					if(resp.data.code > 0){
						alert("添加成功");
						this.addAdr = false;
						this.addSrc = '';
						this.selectAdvertisement();
					}else{
						alert("输入错误信息，请重新输入！");
					}
				});
			},
			updateAdminInfo(){
				let config = {
						headers:{
							'Content-Type':'multipart/form-data'
						}
					}
					let formData = new FormData();
					formData.append("id",this.updateAdv.id);
	                formData.append("www",this.updateAdv.www);
					formData.append("description",this.updateAdv.description);
					// let head=this.updateAdv.head==undefined?null:this.updateAdv.head;
					// formData.append("head",head);
				axios.post("../../advertisement/updateUserInfoAdmin",
						formData,
						config
				).then(resp=>{
					if(resp.data.code== 200){
						alert("修改成功");
						this.update = false;
						this.head = '';
						this.selectAdvertisement();
					}else{
						alert("输入错误信息，请重新输入！");
					}
				});
			}
		}
	});
</script>
</body>
</html>